<template>
	<view>
		<view class="top-box">
			<view class="top-body">等级：{{level}}
				<view></view>
			</view>
			<view class="top-body">
				<view></view>
			</view>
			<view class="top-body">得分：{{score}}
				<view></view>
			</view>
		</view>
		<!-- :style="{ width: canvasW +'px',height:canvasH +'px' }" -->
		<canvas id="canvas" class="canvas-box"  canvas-id="canvas"></canvas>
		<!-- <canvas id="firstCanvas" class="canvas-box" canvas-id="firstCanvas" ></canvas> -->
		<view class="foot-box">
			<view class="foot-body" @click="suspended">
				暂停
			</view>
			<view class="foot-body" @click="setting">
				设置
			</view>
			<view class="foot-body" @click="exit">
				返回
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	// import {getCurrentInstance ,refs} from 'vue';
	// const proxy = getCurrentInstance();
	import { Tools } from"../../utils/tools";
	class cell{
		x = 0;
		y = 0;
	};

	export default {
		data() {
			return {
				canvasW:0, //画布宽
				canvasH:0, //画布高
				SystemInfo:{}, // 设备信息
				footViewHeight:0, //尾部高度
				x_max:10,	// X 轴上有几个格子
				y_max:20,	// Y 轴上有几个格子
				box_size:40,	// 格子大小
				box_list:[],	// 全部格子的集合
				active_box:null,	// 正在活动的块
				next_active_box:null,	// 下一个活动的块（待扩展）
				score:0,	// 分数
				level:0,	//等级
				score_back:0,	// 显示分数的 dom
				push_game:false,	// 暂停的 dom
				game_over:'',   // 游戏结束的 dom
				top_cell_poisition: this.y_max,	// 最顶部的块,
				game_status: -1 //0 游戏运行状态， 1，游戏暂停， -1游戏结束
			}
		},
		
		methods:{
			async again (){
				this.SystemInfo = await this.getSystemInfo();
				let view = uni.createSelectorQuery().select(".foot-box")
				view.boundingClientRect(function(data) {
					//获取固定尾部的高度 = data.height
					this.footViewHeight = data.height
					console.log(data.height)
				}).exec();
				// console.log('-------',this.SystemInfo.windowWidth ,this.SystemInfo.windowHeight)
				this.canvasW = this.SystemInfo.windowWidth - 30; // 画布宽度
				this.canvasH = this.SystemInfo.windowHeight -145 - Math.ceil(this.footViewHeight); //this.goodsImg.height + this.ewmW + 10;  // 画布高度 = 主图高度+二维码高度 + 文字图片的间距（大概50）
				
			},
			// 获取设备信息
			getSystemInfo(){
				
				return new Promise((req, rej) => {
					uni.getSystemInfo({
					    success: function (res) {
					        req(res)
							// console.log('设备信息=====',res)
					    }
					});
				})
			},
			darwMap(){
				const ctx =  uni.createCanvasContext('canvas');
				
				// console.log('ctx',ctx)
				ctx.width = this.box_size * this.x_max;
				ctx.height = this.box_size * this.y_max;
				// console.log('ctx.width =====',ctx.width +'\n' + 'ctx.height =====',ctx.height )
				ctx.lineWidth = 1;
				ctx.fillStyle = "#000000";
				ctx.fillRect(0,0, ctx.width, ctx.height);
				ctx.strokeStyle = "#ee0000";
				
				// const ctx = cas.getContext('2d')
				// ctx.lineWidth = 1;
				// ctx.fillStyle = "#000000";
				// ctx.fillRect(0,0, cas.width, cas.height);
				// ctx.strokeStyle = "#ee0000";
				// 画横线
				for(let i = 0; i < ctx.height; i+= this.box_size ){
					ctx.beginPath(); //新建一条path
					ctx.moveTo(0, i); 
					ctx.lineTo(ctx.width, i);
					ctx.closePath();
					ctx.stroke(); //绘制路径。
					console.log('横线=====',)
				}
				
				// 画竖线
				for(let i = 0; i < ctx.width; i += this.box_size/1.1125){
					ctx.beginPath(); //新建一条path
					ctx.moveTo(i, 0); 
					ctx.lineTo(i, ctx.height); 
					ctx.closePath();
					ctx.stroke(); //绘制路径。
				}
				ctx.draw()

			},
			drawA(){
				const ctx= uni.createCanvasContext('canvas');
				ctx.width = this.box_size * this.x_max;
				ctx.height = this.box_size * this.y_max;
				for(let i=0;i<10;i++)
				{
					let cl = Tools.randomColor()
					
					ctx.beginPath();
					ctx.arc(150,150,10*i,0,2*Math.PI);
					ctx.fillStyle = cl;
					// ctx.fillArct(0,100, ctx.width, ctx.height);
					ctx.strokeStyle=cl;
					ctx.stroke();
					
				}
				ctx.draw()
				
			},
			suspended(){
				
			},
			setting(){
				
			},
			exit(){
				uni.navigateBack({
					delta: 1
				})
			},
			canvasIdErrorCallback: function (e) {
						console.error(e.detail.errMsg)
			}
		},
		onReady(){
			
			// const context = uni.createCanvasContext('firstCanvas')
			const c= uni.createCanvasContext('canvas');
			this.darwMap()
			// this.drawA()
			// context.setStrokeStyle("#00b3ff")
			// context.setLineWidth(5)
			// context.rect(0, 0, 200, 200)
			// context.stroke()
			// context.setStrokeStyle("#414141")
			// context.setLineWidth(2)
			// context.moveTo(160, 100)
			// context.arc(100, 100, 60, 0, 2 * Math.PI, true)
			// context.moveTo(140, 100)
			// context.arc(100, 100, 40, 0, Math.PI, false)
			// context.moveTo(85, 80)
			// context.arc(80, 80, 5, 0, 2 * Math.PI, true)
			// context.moveTo(125, 80)
			// context.arc(120, 80, 5, 0, 2 * Math.PI, true)
			// context.stroke()
			// context.draw()
		},
		
		onLoad() {
			// this.again()
			
			// this.$nextTick(()=>{
			// 	this.again()
			// })
			// (function animloop() {
			// 	console.log('0000')
			// 	window.requestAnimationFrame(animloop);
			// })()
		}
		
	}
</script>

<style>
	.canvas-box{
		/* display: flex; */
		margin: auto;
		width: 90%;
		height: 74vh;
		position: relative;
		top: 0;
		bottom: 80rpx;
		background-color: #a3a3a3;
	}
	.foot-box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		height: 80rpx;
		z-index: 0;
		width: 100%;
		bottom: 0;
		border-top: 1rpx solid #eaeaea;
		padding: 30rpx 0;
	}
	.foot-body{
	    background-color: #00b3ff;
		color: #ffffff;
		padding: 10rpx 30rpx;
		border-radius: 15rpx;
	}
	.null-box{
		height: 80rpx;
		color: #ffffff;
		padding: 30rpx 0;
	}
	.top-box{
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eaeaea;

	}
	.top-body{
		
	}
	
</style>
